<template>
	<view class="container" >
		<uni-row>
			<uni-col :span="24">
				<view >
					<textarea id="resultTextarea" v-model="pasteContent" placeholder="操作:将号码直接粘贴到此处格式" class="ctextarea"></textarea>
					<text >{{count}}注</text>
				</view>
			</uni-col>
		</uni-row>
		<uni-row style="top: 25px"  :gutter="50">
			<uni-col :span="8">
				<button class="button" @click="affix">
					<text class="button-text">粘贴</text>
				</button>
			</uni-col>
			<uni-col :span="8" >
				<button class="button" @click="clear">
					<text class="button-text">清空</text>
				</button>
			</uni-col>
			<uni-col :span="8">
				<button class="button"  @click="optionResult">
					<text class="button-text">提交</text>
				</button>
			</uni-col>
		</uni-row>
		 
	</view>
</template>

<script>
export default {
	data() {
		return {
			pasteContent: '', // 用于存储粘贴的内容
			spliceAllChar: '', //用于数组转换成字符串
			formattedNumbers: [], // 存储格式化后的数字串
			invalidCharacters: [], // 存储所有的非法字符
			messageText: '',
			msgType: '',
			args:{},
			content:'',
			count:0,
		};
	},
	onLoad(query) {
		if (query.args) {
			this.args = JSON.parse(query.args);
		}
	},
	methods: {
		copy() {
			// 获取要复制的文本
			const textToCopy = this.pasteContent;
			// 复制功能
			uni.setClipboardData({
				data: textToCopy, // 要复制到剪贴板的文本
				success: () => {
					// 成功回调函数
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
					this.count = textToCopy.split(' ').length
				},
				fail: () => {
					// 失败回调函数
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		clear() {
			this.pasteContent = '';
		},
		optionResult() {
			// 使用正则表达式提取数字
			let numbers = this.pasteContent.match(/\d+/g);
			if (!numbers) {
				return uni.showToast({
					title: '请输入有效数字',
					icon: 'none'
				});
			}
			// 检查非法字符
			this.invalidCharacters = numbers.filter((num) => isNaN(num));
			if (this.invalidCharacters.length > 0) {
				uni.showToast({
					title: '发现非法字符：' + this.invalidCharacters.join(' '),
					icon: 'none'
				});
			}
			// 格式化数字，每三位添加一个空格
			this.formattedNumbers = numbers.map((num) => num.replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, '$& ')).join(' ');
			// 使用 toString() 方法将 this.spliceAll 转换成字符串
			let arr1 = this.formattedNumbers.split(' ');
			console.log(arr1)
			if(this.args.spliceAll.length == 0){
				this.args.spliceAll = this.generateData().join(' ');
			}
			let arr2 =  this.args.spliceAll.split(' ')
			// 将 arr1 和 arr2 中相同的值从两个数组中删除
			this.content = arr2 = arr2.filter((value) => !arr1.includes(value));
			this.saveRecord()
		},
		saveRecord(){
				let data = {};
				const str = JSON.stringify(this.pasteContent.split(' '))
				const deviceId = uni.getStorageSync("phone");
				data.type = this.args.type; // 彩票类型
				//data.optionType = this.optionType //按钮的类型编号 比如 组排 的 0 百位 1
				data.optionName = "直选垃圾" //this.optionName //按钮的类型名称  比如 组排 百位
				data.deviceId = deviceId; // 设备唯一编号 可以是手机号
				data.record = str;
				data.projectName = this.args.projectName
				data.result = JSON.stringify(this.content)
				// 0 代表从走势图查看的 并且需要在个人记录中查看
				data.flag=2
				this.$myRequest({
					method: 'post',
					url: '/saveRecord',
					data: data
				}).then((res) => {
						if(res.flag){
							setTimeout(function() {
								 uni.navigateBack();
							},200)
						}
						
				});
		} ,
		generateData() {
		  let arr = [0,1,2,3,4,5,6,7,8,9]
		  return arr.flatMap(i =>  
		    arr.flatMap(j =>  
		      arr.map(k => `${i}${j}${k}`)  
		    )  
		  );  
		},
		affix() {
			// 粘贴操作
			uni.getClipboardData({
				success: (res) => {
					let clipboardContent = res.data;
					// 使用正则表达式检查是否只包含数字和空格
					if (/^[0-9\s,]+$/.test(clipboardContent)) {
							clipboardContent = clipboardContent.replace(/\n/g," ")
							clipboardContent = clipboardContent.replace(/,/g, ' ').trim();
							clipboardContent =clipboardContent.replace(/\s+/g, ' ');
							
						// 如果剪贴板内容只包含数字，赋值给变量

						// 判断当前状态，如果已经有粘贴内容，进行拼接
						if (this.pasteContent) {
							this.pasteContent += ' ' + clipboardContent;
						} else {
							this.pasteContent = clipboardContent; // 第一次粘贴
						}
						this.count = this.pasteContent.split(' ').length
						// this.$refs.message.open();
						uni.showToast({
							title: '粘贴成功',
							icon: 'none'
						});
					} else {
						// 这里可以添加提示用户的代码，比如弹窗、Toast等
						uni.showToast({
							title: '粘贴失败，存在不法字符',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('获取剪贴板内容失败', err);
					// this.msgType = 'error';
					// this.messageText = `获取剪贴板内容失败`;
					// this.$refs.message.open();
					uni.showToast({
						title: '获取剪贴板内容失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
@mixin flex {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
}
 .container {
   height: 100vh;
   padding: 10px;  
   background-color: #f6eee8;  
   border-radius: 10px;  
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
 }

 .ctextarea{
 	height:200px;
 	background-color: white;
 	border-radius: 10px;
 	width: 100%;            /* 设置宽度 */
 	padding: 10px;        /* 内边距 */
 	box-sizing: border-box; /* 包括内边距和边框 */
 }
 
 .button {
 	display: flex;
 	justify-content: center; /* 水平居中 */
 	align-items: center; /* 垂直居中 */
 }
 .button1 {
 	display: flex;
 	justify-content: center; /* 水平居中 */
 	align-items: center; /* 垂直居中 */
 	width: 80px; /* 按钮宽度 */
 	height: 30px; /* 按钮高度 */
 	border: 1px solid #ccc; /* 边框样式 */
 	border-radius: 30px; /* 圆角 */
 }
 .button-text {
 	font-size: 10px; /* 字体大小 */
 	color: #333; /* 文字颜色 */
 	text-align: center; /* 文字水平居中 */
 	color: black; /* 初始字体颜色 */
 }
</style>
